import React from 'react'
import '@/assets/testcombine.scss'

/**
 * 组合 vs 继承
 * 组合和继承，都是组件复用的一种思想
 * 组合的设计模式：组装
 * 但是React官方的推荐
*/
const DJModel = props => {

  /** 这些属性都是由父组件传递给子组件使用的
   * show: 控制弹框的显示与隐藏
   * onClose: 关闭按钮和取消按钮的触发的事件
   * showHeader：控制头部是否要实现与隐藏
   * tip：表示提示的文字信息
   * children：是不用在父组件中传递的，使用双标签中里面存放的内容就是子组件children
   * type: 表示的是按钮是属性哪种类型的
  */
  let { 
    show, 
    onClose,
    showHeader,
    tip,
    children
  } = props


  const renderBtns = () => {
    let { type, custom } = props
    type = type || 'confirm'
    let arr = []

    switch(type) {
      case 'confirm':
        arr = [
          <span 
            className='cancel'
            onClick={ () => onClose && onClose() }
            key={ 1 }
          >
            取消
          </span>,
          <span className='confirm' key={ 2 }>确认</span>
        ]
        break
      case 'delete':
        arr = [
          <span className='delete' key={ 2 }>删除</span>,
          <span className='confirm' key={ 1 }>确认</span>
        ]
        break
    }

    return custom || arr
  }

  return (
    <div 
      className="dj-model-layer" 
      style={ { display: (show || false) ? 'block' : 'none' } }
    >
      {/* 最外层是遮罩框 */}
      <div className="dj-model">
        {/* 头部内容 */}
        {
          showHeader && (
            <div className="header">
              <span>{ tip || '提示' }</span>
              <span 
                className='close' 
                onClick={ () => onClose && onClose() }
              >
                x
              </span>
            </div>
          )
        }

        {/* 主体内容 */}
        <div className="content">
          <div className="wrap">
            { children }
          </div>
        </div>

        {/* 底部按钮组内容 */}
        <div className="footer">
          <div className="btn">
            { renderBtns() }
          </div>
        </div>
        
      </div>
    </div>
  )
}

export default class TestCombine extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      show: false,
      visable: false
    }
  }

  operate (type) {
    this.setState({
      [type]: true
    })
  }

  close (type) {
    this.setState({
      [type]: false
    })
  }

  render () {
    let { show, visable } = this.state

    return (
      <div className="Combine">
        <button onClick={ () => this.operate('show') }>显示</button>
        <DJModel 
          show={ show }
          onClose={ () => this.close('show') }
          showHeader={ true }
          tip={ '警告' }
          type={ 'delete' }
          custom= { <span className='custom'>自定义按钮</span> }
        >
          <div className='children'>我是子内容</div>
        </DJModel>

        <hr/>
        
        <button onClick={ () => this.operate('visable') }>修改用户名</button>
        {/* DJModel 是父组件，传递的参数会被子组件接收，接收的值是作为实参 */}
        <DJModel 
          show={ visable }
          onClose={ () => this.close('visable') }
          showHeader={ true }
          tip={ '修改' }
          type={ 'delete' }
        >
          <div className="edit-content">
            <input type="text" placeholder='请输入修改的用户名'/>
          </div>
        </DJModel>

      </div>
    )
  }
}